<template>
  <div 
    :class="[
      'w-full h-20 rounded-2xl shadow-custom relative overflow-hidden transition-all duration-200',
      task.bgColor,
      task.selected ? 'ring-2 ring-primary-500 ring-opacity-50' : ''
    ]"
  >
    <!-- 左侧图标 -->
    <div class="absolute left-4 top-4">
      <img :src="task.icon" :alt="task.title" class="w-6 h-6">
    </div>

    <!-- 中间内容 -->
    <div class="absolute left-16 top-4">
      <h3 
        :class="[
          'text-lg font-poppins font-semibold',
          task.bgColor === 'bg-primary-600' ? 'text-white' : 'text-gray-700'
        ]"
      >
        {{ task.title }}
      </h3>
      <p class="text-xs font-poppins text-gray-400 mt-1">{{ task.time }}</p>
    </div>

    <!-- 右侧操作图标 -->
    <div class="absolute right-4 top-3">
      <img :src="task.actionIcon" alt="操作" class="w-5 h-5 cursor-pointer" @click="$emit('select', task.id)">
    </div>

    <!-- 选择状态指示器 -->
    <div 
      v-if="task.selected"
      class="absolute right-3 top-3 w-4 h-4 bg-primary-500 rounded-full flex items-center justify-center"
    >
      <div class="w-2 h-2 bg-white rounded-full"></div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  task: {
    type: Object,
    required: true
  }
})

defineEmits(['select'])
</script>

<style scoped>
.shadow-custom {
  box-shadow: 0px -7px 23px rgba(0, 0, 0, 0.02);
}
</style>